<%--
  Created by IntelliJ IDEA.
  User: 她和卡莎一样美
  Date: 2022/3/29
  Time: 17:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>人脸比对</title>
</head>
<style>
    .service-page section {
        padding-top: 0px;
    }

    .section-demo {
        margin: 0 auto;
    }
    section {
        display: block;
    }
    .service-page section>.container {
        box-sizing: border-box;
        padding-left: 260px;
    }
    .container {
        width: 1200px;
        margin: 0 auto;
    }
    .service-page section>.container .section-title {
        margin-top: 0;
    }
    .section-title {
        margin-top: 70px;
        margin-bottom: 30px;
        text-align: center;
        font-size: 28px;
        letter-spacing: 1px;
        font-weight: 400;
    }
    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    .section-title span {
        position: relative;
    }
    div {
        display: block;
    }
    .gaia-page {
        min-width: 1200px;
        font-family: "\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"\5B8B\4F53";
    }
    .service-fc-test .solutions-item-content {
        background-color: #fff;
        border: 1px solid #e6e8f4;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 30px;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part {
        position: relative;
        width: 512px;
        text-align: center;
        font-size: 0;
    }
    .service-fc-test ul, .service-fc-test li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part .compare-scan {
        display: none;
        position: absolute;
        z-index: 7;
        top: 25px;
        left: 3.5px;
        width: 358px;
        border-bottom: 3px solid #3e88f1;
        animation: fcScan 1.2s infinite;
        background: linear-gradient(180deg, transparent, #3e88f1);
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part .photo-image-left {
        background-image: url(images/a1.png);
    }

    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part .photo-image {
        width: 358px;
        height: 238px;
        margin: 25px auto 0;
        border: 1px solid #e7e9f5;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-size: cover;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part .taste-button {
        display: inline-block;
        position: relative;
        margin-top: 26px;
        height: 40px;
        width: 160px;
        line-height: 40px;
        font-size: 16px;
        letter-spacing: 2px;
        text-align: center;
        color: #4a81ff;
        background: #fff;
        border: 1px solid #4a81ff;
        border-radius: 3px;
        overflow: hidden;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part input {
        position: absolute;
        left: 0;
        top: 0;
        height: 40px;
        width: 160px;
        cursor: pointer;
        opacity: 0;
        font-size: 50px;
        -ms-transform: scale(2);
        transform: scale(2);
        z-index: 99;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-score {
        position: relative;
        font-size: 0;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-score .canvas-container {
        margin-top: 40px;
    }
    canvas[AttributesStyle] {
        aspect-ratio: auto 150 / 150;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-score .compare-percent {
        position: absolute;
        left: 0;
        top: 100px;
        width: 100%;
        text-align: center;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-score .compare-percent .compare-percent-score {
        font-size: 24px;
        font-weight: bold;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-score .compare-percent span {
        font-size: 14px;
        color: #4a81ff;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-score p {
        width: 100%;
        text-align: center;
        color: #657383;
        font-size: 14px;
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .content-show .solutions-item-content-part .photo-image-right {
        background-image: url(images/a2.png);
    }
    div {
        display: block;
    }

    div {
        display: block;
    }
    input[type="file" i] {
        appearance: none;
        background-color: initial;
        cursor: default;
        align-items: baseline;
        color: inherit;
        text-overflow: ellipsis;
        white-space: pre;
        text-align: start !important;
        padding: initial;
        border: initial;
        overflow: hidden !important;
    }
    input {
        writing-mode: horizontal-tb !important;
        letter-spacing: normal;
        word-spacing: normal;
        line-height: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        display: inline-block;
        text-align: start;
        appearance: auto;
        -webkit-rtl-ordering: logical;
        cursor: text;
        margin: 0em;
        padding: 1px 2px;
        border-width: 2px;
        border-style: inset;

        border-image: initial;
    }
    .service-fc-test .solutions-item-content .taste-tip {
        margin: 20px 0 20px 34px;
        font-size: 12px;
        color: #7a8ba6;
    }
    div {
        display: block;
    }
    .service-fc-test .solutions-item-content .taste-tip p {
        margin: 0;
        line-height: 28px;
    }
    .service-fc-test .solutions-item-content .solutions-item-photo-list {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 30px 25px;
    }
    .service-fc-test .solutions-item-content .solutions-item-photo-list .active {
        border: 2px solid #4a81ff;
        opacity: 1;
    }
    .service-fc-test .solutions-item-content .solutions-item-photo-list .photo-1 {
        background-image: url(http://aixfyun.cn-bj.ufileos.com/ZFAI/a11.png);
    }
    .service-fc-test .solutions-item-content .solutions-item-photo-list .solutions-item-photo {
        position: relative;
        width: 160px;
        height: 89px;
        font-size: 0;
        opacity: .5;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .service-fc-test .solutions-item-content .solutions-item-photo-list .photo-2 {
        background-image: url(http://aixfyun.cn-bj.ufileos.com/ZFAI/b11.png);
    }
    div {
        display: block;
    }
    div {
        display: block;
    }
    .upload-drop-zone {
        height: 340px;
        border-width: 1px;
        margin-bottom: 20px;
        width: 378px;
    }
    .sbutton{
        display: inline-block;
        position: relative;
        margin-top: 26px;
        height: 40px;
        width: 160px;
        color: #4a81ff;
        background: #fff;
        border: 1px solid #4a81ff;
    }
    .face_menu{
        margin-top: 5px;
        background-color: #f8f8f9;
        border-radius: 10px;
    }
    .face_menu li{
        color: #2e6da4;
    }
    .home{
        margin-top:5px;
        border:1px solid transparent;
        border-radius: 10px;
        color: #f9f9f9;
        height: 29px;
        background-color: #f8f8f9;
        padding-left:10px;
    }
    .home a{
        color: #2e6da4;
        font-size: 16px;
    }
    .left{
        float: left;
        margin-left: 50px;
        width: 15%;
        height: 18%;
    }
    .right{
        float: right;
        margin-left: 50px;
        width: 12%;
        height: 4.5%;
        /*background: #6777ef;*/
    }
    a{
        text-decoration:none;
    }
</style>
<body>
<div class="right">
    <div class="home">
        <div>
            <a>个人中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="loginOut" class="logout">登  出</a>
        </div>
    </div>
</div>
<div class="left">
    <div class="home"><a href="my_home.jsp">首页</a></div>
    <div class="face_menu" id="test_com" onclick="showMenu()">
        <div class="home"><a id="test1" href="face.jsp">人脸特征分析</a></div>


<%--        <div id="face_menu" style="display: none;">
            <ul>
                <a href="face.jsp">特征分析</a>
            </ul>
        </div>--%>
        <div class="home" id="face_comparison"><a href="db.jsp">人脸比对</a></div>
    </div>
</div>
<section id="anchor977144" class="section-demo">
    <div class="container">
        <h2 class="section-title"><span>人脸比对</span></h2>
        <div class="service-item-demo service-fc-test">
        <div class="solutions-item-content">
            <div class="content-show">
                <li class="solutions-item-content-part">
                    <div class="compare-scan"></div>
                    <div id="drop-zone1" class="form-inline">
                        <img src="./images/a1.png" class="upload-drop-zone" id="img"/>
                    </div>
                    <div class="taste-button">上传本地图片<input type="file" name="imgUpload" id="face-compare-img-left" class="face-compare-img-upload face-compare-img-left" accept="jpg,png,jpeg,bmp" limitsize="2"></div>
                </li>
                <li class="solutions-item-content-score">
                    <canvas class="canvas-container" id="canvas-container" width="150" height="150"></canvas>
                    <div class="compare-percent">
                        <span class="compare-percent-score" id="test">??</span>
                        <span>%</span></div>
                    <p class="compare-result" ><span id="shibie">???</span></p>
                    <p><button type="button" class="sbutton" id="send">识别</button></p>
                </li>
                <li class="solutions-item-content-part">
                    <div id="drop-zone" class="form-inline">
                        <img src="./images/a2.png" class="upload-drop-zone" id="imgg"/>
                    </div>
                    <div class="compare-scan"></div>
<%--                    <div class="photo-image photo-image-right" id="imggg"></div>--%>

                    <div class="taste-button">上传本地图片<input type="file" name="imgUpload" id="face-compare-img-right" class="face-compare-img-upload face-compare-img-right" accept="jpg,png,jpeg,bmp" limitsize="2">
                    </div>
                </li>
                <div class="form-inline">

                </div>
            </div>
            <div class="taste-tip">
                <p>*图片文件仅支持.jpg/.jpeg/.png/.bmp格式，图片大小不超过2M</p>
                <p>*请提供清晰的人脸照片，人脸大小不小于30*30像素，其中人脸俯仰角、左右偏航角、人脸反转角60°以内识别效果最好</p>
                <p>*人脸比对只可对比图片中主体部分人脸</p></div>
        </div>
    </div>
    </div>
</section>
</body>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
    // file是图片上传input 的id值
    document.querySelector("#face-compare-img-left").onchange = function () {
        let reader = new FileReader();
        let file = this.files[0];
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            let img = document.querySelector("#img");// img 是图片标签id值
            //图片路径设置为读取的图片
            img.src = e.target.result;

            var strData = new FormData();
            strData.append("upfile", file);
            strData.append("type", "feature");
            $.ajax({
                type: "post",
                <%--url:"<%=request.getContextPath()%>/upload",--%>
                url: "<%=request.getContextPath()%>/uploadd",
                data: strData,
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    console.log(data);
                    alert("上传成功")
                }
            })
        };
        reader.readAsDataURL(file);
    };
    document.querySelector("#face-compare-img-right").onchange = function () {
        let reader = new FileReader();
        let file = this.files[0];
        //读取完成
        reader.onload = function (e) {
            // 获取图片dom
            let img = document.querySelector("#imgg");// img 是图片标签id值
            // 图片路径设置为读取的图片
            img.src = e.target.result;

            var strData = new FormData();
            strData.append("upfile", file);
            strData.append("type", "feature");
            $.ajax({
                type: "post",
                <%--url:"<%=request.getContextPath()%>/upload",--%>
                url: "<%=request.getContextPath()%>/upload",
                data: strData,
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    console.log(data);
                    alert("上传成功")
                }
            })
        };
        reader.readAsDataURL(file);
    };
    $("#send").click(function (){
        $.ajax({
            type:"POST",
            url:"<%=request.getContextPath()%>/ShiBie ",
            processData:false,
            contentType:false,
            async:true,
            dataType:"json",
            success:function (result){
                console.log(result);
                alert("识别成功")
                // alert(result.score);
                // alert(result1.score);
                if (result.score<0.67){
                    // alert("不太可能是一个人");
                    $("#shibie").html("不太可能是同一个人")
                    $("#test").html(result.score*100)
                }else if (result.score>0.67 && result.score < 0.75){
                    // alert("可能是一个人")
                    $("#shibie").html("可能是同一个人")
                    $("#test").html(result.score*100)
                }else if (result.score>=0.75){
                    // alert("极有可能是一个人")
                    $("#shibie").html("极有可能是同一个人")
                    $("#test").html(result.score*100)
                }

            }
        })
    }
    );
    var wait = 30;
    function time(){
        console.log(wait);
        var btn=document.getElementById("send");
        var str =btn.innerText;
        if (wait==1){
            btn.style.background="#337ab7";
            btn.innerText="再次识别";
            btn.removeAttribute("disabled");
            wait=30;
        }else {
            wait--;
            btn.style.background = "#868670";
            btn.innerText="请"+wait+"秒后再识别";
            btn.setAttribute("DISABLED", "true");
            setTimeout(function (){
                time();
            },1000);
        }
    }


</script>
<%--<script type="text/javascript">
    $("#test_com").click(function (){
        if ($("#face_menu").is(":hidden")){
            $("#face_menu").show(700);
        }else{
            $("#face_menu").hide(700);
        }
    });
</script>--%>
</html>